<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <Header @addTodo="addTodo"></Header>
        <List :todos="todos" @handleCheckBox="handleCheckBox"
        @handleDelete="handleDelete"></List>
        <Footer :todos="todos" @clearAllDone="clearAllDone"
        @allChecked="allChecked"></Footer>
      </div>
    </div>
  </div>
</template>

<script>
import './assets/css/index.css'
// import Son from './components/Son/Son.vue'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
export default{
  data(){
    return {
      todos: [
            {id:'001',name:'吃饭',done:true},
            {id:'002',name:'睡觉',done:true},
            {id:'003',name:'打代码',done:false},
            {id:'004',name:'逛街',done:false}
        ]
    }
  },
  components:{
    Header,
    List,
    Footer
  },
  methods:{
    handleCheckBox(id,done){
      const newTodos = this.todos.map(todo => {
        if(todo.id === id) return  {...todo,done}
        else return todo
      })
      this.todos = newTodos
    },
    handleDelete(id){
      const newTodos = this.todos.filter(todo => todo.id !== id)
      this.todos = newTodos
    },
    clearAllDone(){
      const newTodos = this.todos.filter(todo => !todo.done)
      this.todos = newTodos
    },
    addTodo(val){
      console.log(val)
      const newTodos = [val,...this.todos]
      this.todos = newTodos
    },
    allChecked(done){
      const newTodos = this.todos.map(todo => {return {...todo,done}})
      this.todos = newTodos
    }
  }
}
</script>

<style>
/* .son{
    color: red;
    font-weight: bold;
    font-size: 50px;
} */
</style>
